<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tab栏切换(自定义)</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .tab_1 {
        width: 987px;
        margin: 100px auto;
      }
      .tab_2 {
        height: 40px;
        border: 1px solid #ccc;
        background-color: #f1f1f1;
        /* display: block; */
      }
      li {
        list-style-type: none;
      }
      .tab_2 li {
        float: left;
        height: 39px;
        line-height: 39px;
        padding: 0 20px;
        text-align: center;
        cursor: pointer;
      }
      .current {
        background-color: red;
        color: #f1f1f1;
      }
      .tab_31 {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="tab_1">
      <div class="tab_2">
        <ul>
          <li data-target="tab1" class="current">商品介绍</li>
          <li data-target="tab2">规格与包装</li>
          <li data-target="tab3">售后保障</li>
          <li data-target="tab4">商品评价(50000)</li>
          <li data-target="tab5">手机社区</li>
        </ul>
      </div>
      <div class="tab_3">
        <div data-content="tab1" class="tab_31" style="display: block">
          商品介绍模块内容
        </div>
        <div data-content="tab2" class="tab_31">规格与包装模块内容</div>
        <div data-content="tab3" class="tab_31">售后保障模块内容</div>
        <div data-content="tab4" class="tab_31">商品评价(50000)模块内容</div>
        <div data-content="tab5" class="tab_31">手机社区模块内容</div>
      </div>
    </div>
    <script>
      //获取相关dom元素
      const lis = document.querySelectorAll('.tab_2 li') 
      const divs = document.querySelectorAll('.tab_31') 

      //遍历li
      lis.forEach(function(item){
          console.log(item,'item')
          // console.log(index,'index')
          /* 在这里添加一个索引,下面div显示是索引和上面li的高亮状态所在索引是一一对应 */
          item.onclick = function(){
              //使用排他思想:先清除所有li的样式
              lis.forEach(function(li){
                  console.log(li,'li')
                  li.classList.remove('current')
              })
              //在给当前点击的li添加样式
              item.classList.add('current')

              //对divs使用排他思想:先让所有的div隐藏
              divs.forEach(function(div){
                  div.style.display = 'none'
              })

              //方式二:先获取选中li的data-target的值
              const value = item.dataset.target
              console.log(value,'value')

              //根据value的值,找到对应的div
              const div = document.querySelector(`[data-content=${value}]`)
              div.style.display = 'block'
          }
      })
    </script>
  </body>
</html>
